<script src="<?php echo base_url() ?>javascript/jquery/jquery.metadata.js"></script>
<script src="<?php echo base_url() ?>javascript/jquery/jquery.ImageOverlay.js"></script>
<script type="text/javascript">
	// JavaScript for the Image Overlay galleries.
	$(document).ready(function(){
		$("#gallery").ImageOverlay();
	});
</script>
<?php if ($pagination->prev) { ?>
	<a href="<?php echo url_create('site', 'home', $method, $pagination->prev) ?>" id="foo2_prev" class="prev1" style="display: block;"><span>prev</span></a>
<?php } ?>
<?php if ($pagination->next) { ?>
	<a href="<?php echo url_create('site', 'home', $method, $pagination->next) ?>" id="foo2_next" class="next1" style="display: block;"><span>next</span></a>
<?php } ?>

<div class="box">
	<h3><?php echo $title ?></h3>
	<div class="image-overlay" id="gallery">
		<?php foreach ($images as $i => $image) { ?>
			<div style="box-shadow: 0 0 3px #000;position: relative; overflow: hidden;width: 300px;height: 200px;float:left;padding: 0px;border: 1px solid #D5D5D5;margin: 6px 9px">
				<a href="<?php echo url_create('site', 'photo', 'index', $image->id) ?>">
					<img style="width: 300px;max-height: 200px" src="<?php echo image_url($image->thumb2) ?>" alt="<?php echo $image->title ?>" >
				</a>
				<div class="caption" style="width: 300px;color: #AAA">
					<div class="stats" style="padding: 5px 5px 0px">
						<span title="<?php echo lang('views_count') ?>" class="views"><?php echo $image->views ?></span>
						<span title="<?php echo lang('comments_count') ?>" class="comments"><?php echo $image->comments ?></span>
						<span title="<?php echo lang('likes_count') ?>" class="likes"><?php echo $image->likes ?></span>
					</div>
					<h2 style="margin: 10px 5px">
						<a style="color: #ccc;" href="<?php echo url_create('site', 'photo', 'index', $image->id) ?>"><?php echo smileys_parse($image->title) ?></a>
					</h2>
					<div class="uploader" style="padding-left: 10px">
						<?php echo lang('uploaded_by') ?> <a href="<?php echo url_create('site', 'account', 'images', $image->user_id) ?>"><?php echo $image->fullname ?></a>
						<?php echo time2str($image->upload_date) ?>
					</div>

				</div>

			</div>
		<?php } ?>
		<script>
			$('.caption').each(function(){
				var parent = $(this).parent();
				var top = parent.position().top+parent.height()-78;//-$(this).height();
				//				var top = parent.position().top+parent.height()-$(this).height()-95;
				$(this).css({
					//					display: 'none',
					background: '#000',
					opacity: 0.7,
					position: 'absolute',
					top: top+'px'
				})
			})
		</script>
	</div>
	<?php if (isset($pagination)) { ?>
		<div style="text-align: center">
			<button class="pagination" data="<?php echo url_create('site', 'home', $method, $pagination->first) ?>"><?php echo lang('first') ?></button>
			<button class="pagination" data="<?php echo url_create('site', 'home', $method, $pagination->prev) ?>"><?php echo lang('prev') ?></button>
			<?php if ($pagination->left) { ?>
				...
			<?php } ?>
			<?php foreach ($pagination->pnumbers as $pnumber) { ?>
				<button class="<?php echo ($pagination->curr == $pnumber)?'disabled':'pagination';?>" data="<?php echo url_create('site', 'home', $method, $pnumber) ?>"><?php echo $pnumber ?></button>
			<?php } ?>
			<?php if ($pagination->right) { ?>
				...
			<?php } ?>
			<button class="pagination" data="<?php echo url_create('site', 'home', $method, $pagination->next) ?>"><?php echo lang('next') ?></button>
			<button class="pagination" data="<?php echo url_create('site', 'home', $method, $pagination->last) ?>"><?php echo lang('last') ?></button>
		</div>
		<script>
			$(document).ready(function(){
				$('.pagination').click(function(){
					window.location = $(this).attr('data');
				})
			})
		</script>
	<?php } ?>
	<div class="clear"></div>
</div>
	<div class="fb-like-box" data-href="<?=$social_page?>" data-width="995" data-show-faces="true" data-stream="false" data-header="false"></div>
	<div>
		<h1 style="font-size: 12px;font-weight: normal">
			<a href="<?=url_create('site','home','text')?>" title="Anh hai">Anh hai</a> | 
			<a href="<?=url_create('site','home','video')?>" title="Video hai">Video hai</a> | 
			<a href="<?=url_create('site','home','hot')?>" title="Anh vui">Anh vui</a> | 
			<a href="<?=url_create('site','home','vote')?>" title="Anh 18+">Anh 18+</a> | 
			<a href="<?=url_create('site','acount','image')?>" title="Haivl">Haivl</a> | 
			<a href="<?=url_create('site','home')?>" title="Anh hài">Ảnh hài</a> | 
			<a href="<?=url_create('site','home','video')?>" title="video hài">Video hài</a>
		</h1>
	</div>
<script>
	var fixedTop = ($('#header').position()).top+$('#header').height()+20;
	
	$(window).scroll(function(){
		var yHeader = ($('#header').position()).top+$('#header').height()+20;
		$('.info').each(function(){
			var yInfo = ($(this).position()).top;
			var y2Info = yInfo+$(this).height();
			var yThumb = ($(this).prev().position()).top;
			var y2Thumb = yThumb + $(this).prev().height();
			if(yHeader>yInfo && yHeader+$(this).height()<y2Thumb)
			{
				$(this).css({
					position: 'fixed',
					top: fixedTop+'px'
				})
			}else if(yInfo<yThumb || y2Info>=y2Thumb){
				$(this).css({
					position: 'relative',
					top: '0px'
				})
			}
		})
	});
</script>